
@mixin v_h_center(){
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
@mixin v_center(){
    position:absolute;
    top:50%;
    transform:translate(0,-50%);
}
@mixin h_center(){
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}
@mixin backgroundImage($position1, $position2, $repeat, $size){
	background-position: $position1 $position2;
	background-repeat: $repeat;
	background-size: $size;
}

@mixin lineClamp($line){
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box; //webkit-box
  -webkit-line-clamp:$line;
  line-clamp:$line;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  box-orient: vertical;
}

@mixin haitun(){
	.haitun{
		//@include backgroundImage(center, center, no-repeat, contain);
		width:34px;
		height:13px; 
		//background-image:url('../assets/images/haitun.png');
		display:inline-block;
		margin-right:3px;
		vertical-align:middle;
		position:relative;
		top:-1px;
	}
}

@mixin proTitle(){
	font-size: 15px;
	// height: 34px;
	@include lineClamp(2); 
	line-height:1.3; 
	letter-spacing: 1px;
	@include haitun();
	color:#333;
}

// cartNumPannel
@mixin cartNumPannel() {
	.calc-num{
		font-size:0;
		&> input{
			display:inline-block; 
			width:p2r(90px);
			height:p2r(50px);
			padding: 2px;
			text-align:center;
			vertical-align: top;
			border-radius:0;
			background:#F0F0F0;
			margin:0 1px;
		}
		&> div{
			display:inline-block;
			background:#F0F0F0;
			color:#333;
			text-align:center;
			padding:0px 2px;
			font-size:16px;
			width:p2r(50px);
			height:p2r(50px);
			line-height:p2r(50px);
			vertical-align: top;
			i{
				position:relative;
				top:-1px;    
				font-size: 14px;
			}
		}
	}
}

@mixin gradientBg($orient, $color1, $color2) {
	background: linear-gradient($orient , $color1 , $color2 100%);
	background: -o-linear-gradient($orient , $color1 , $color2 100%);
	background: -ms-linear-gradient($orient , $color1 , $color2 100%);
	background: -moz-linear-gradient($orient , $color1 , $color2 100%);
	background: -webkit-linear-gradient($orient ,$color1 , $color2 100%);
}

@mixin search-condition-head(){
	.list-head{
		border-bottom:1px solid #eee;
		background:#fff;
		position:relative;
		padding-left:5px;
		.head>.fl>a{
			height:35px;
			text-align:center;
			line-height:35px;
			position:relative;
			width: 22%;
			display: inline-block;
			font-weight:700;
			&:after{
				content:'';
				display:none;
				width:1px;
				background:#ccc;
				height:p2r(40px);
				position:absolute;
				right:0;
				top:p2r(20px);
			}
			&:last-child:after{display:none;}
			i:after{
				content:'';
				display:inline-block;
				border:4px solid transparent;
				border-top:4px solid #ccc;
				margin-left:3px;
				position:relative;
				top: 1px;
			}
			&.on{
				color:#de423b;
			}
			&.asc{ //  sheng xu
				color:#333;
				i:after{
					border:4px solid transparent;
					border-top:4px solid #999;
					top: 1px;
				}
			}
			&.desc{
				color:#333;
				i:after{
					border:4px solid transparent;
					border-bottom:4px solid #999;
					top: -3px;
				}
			}
		}
		.head>.fr>a{
			display:block;
			height:35px;
			line-height:35px;
			text-align:center;
			position:relative;
			padding: 0 10px;
			i{
				font-size:20px;color:#5d5d5d;vertical-align: middle;
			}
			&:before{
				content:'';
				display:block;
				position:absolute;
				left:0;
				top:7px;
				width:1px;
				height:20px;
				background:#eee;
			}
		}
		.searchDrop{
			position:absolute;
			top:35px;
			left:0;
			width:100%;
			z-index: 1;
			box-shadow:0px 1px 1px 0px rgba(0,0,0,0.1);
			&>div{
				height:30px;
				line-height:30px;
				color: #000;
				text-align:left;
				padding-left:10px;
				border-bottom:1px solid #eee;
			}
		}
	}
}

@mixin priceBox () {
	.priceBox{ 
		p{display:inline-block;font-size:12px;span{font-size:14px;}}
		.price-c{
			color:#f40000;margin-right:5px;font-size:10px;
			margin-top:5px;
			span{font-size:16px;font-weight:700;}
		}
		.price-eco{
			text-decoration:line-through;color:#999999;
			span{font-size:12px;}
		}
	}
}
@mixin profit () {
	.profit{
		color:#333333;
		&>*{
			display:inline-block;
			vertical-align:middle;
			color:#C01B10;
		}
		&>p{
			height: 16px;
			line-height: 16px;
			padding: 0 5px;
			border-radius: 100px;
			border: 1px solid #fff;
			color: #fff;
			display: inline-block;
			font-size: 10px;
			@include gradientBg(left , #DE423B , #F45631);
		}
	}
}
@mixin proLi(){
	li{
		width:calc((100vw - 25px) / 2);
		float:left;
		text-align:center;
		position:relative;
		padding-top:10px;
		background:#fff;
		margin-bottom:5px;
		&:nth-child(odd){
			margin-right:5px;
		}
		.img{
			width:calc((100vw - 30px) / 2);
			height:calc((100vw - 30px) / 2);
			overflow:hidden;
			img{ 
				width:100%!important;
				//height:100%!important;
				display: block;
			}
		}
		.info{
			padding:10px 5px;
			.title{
				@include proTitle();
			}
			.priceBox{ 
				p{display:inline-block;font-size:12px;span{font-size:14px;}}
				.price-c{
					color:#C01B10;margin-right:5px;font-size:10px;
					margin-top:5px;
					span{font-size:16px;font-weight:700;}
				}
				.price-eco{
					text-decoration:line-through;color:#999999;
					span{font-size:12px;}
				}
			}
			.profit{
				color:#333333;
				&>*{
					display:inline-block;
					vertical-align:middle;
					color:#C01B10;
				}
				&>p{
					height: 16px;
					line-height: 16px;
					padding: 0 5px;
					border-radius: 100px;
					border: 1px solid #fff;
					color: #fff;
					display: inline-block;
					font-size: 10px;
					@include gradientBg(left , #DE423B , #F45631);
				}
			}
			.sellNums{
				color:#808080;
				font-size:11px;
			}
		}
	}
}


@mixin absolute_scroll_div($top, $bot) {
	position:absolute;
	top:$top;
	left:0;
	right:0;
	bottom:$bot;
	overflow-x:hidden;
	overflow-y:auto;
}


@mixin giftItem(){
	.gifts{
		align-items:flex-start;
		background:#fff;
		padding:10px;
		margin-top:10px;
		border-bottom:1px solid #f5f5f5;
		.flex-1{
			padding:0 10px;
			&>a{
				display:block;
				margin-bottom:5px;
				@include lineClamp(1);
				&:last-child{margin-bottom:0;}
			}
			.icon{
				height:16px;
				line-height:16px;
				padding:0 5px;
				border-radius:2px;
				border:1px solid #f7d7e5;
				background:#f7d7e5;
				color:#FF3064;
				display:inline-block;
				font-size:10px;
				margin-right:5px;
			}
		}
		.moreGifts{
			background-image:url('');
			display:block;
			width:20px; 
			height:10px;
			position:relative;
			@include backgroundImage(center, center, no-repeat, contain);
			&:before{
				content:'';
				display:block;
				position:absolute;
				top:-10px;
				left:-10px;
				bottom:-10px;
				right:-10px;
			}
		}
	}
}

